<template>
  <div class="chat">
    <div class="title">
      <el-input placeholder="请输入标题" v-model="title" clearable></el-input>
    </div>
    <ki-editor v-model="content" place-holder="请分享你的故事~"/>
    <div class="btn">
      <el-popconfirm
        confirm-button-text="确定"
        cancel-button-text="取消"
        title="你确定要分享故事吗"
        @confirm="handleShareClick"
      >
        <template #reference>
          <el-button size="large" type="primary">分享</el-button>
        </template>
      </el-popconfirm>
    </div>
  </div>
</template>

<script setup lang="ts">
import {ref} from 'vue'
import KiEditor from '@/components/ki-editor/KiEditor.vue';
import { ElMessage } from 'element-plus'
import 'element-plus/theme-chalk/el-message.css'
import {shareStory} from '@/services/story'
const title = ref('')
const content = ref('')
const handleShareClick = async () => {
  if(!title.value || !content.value){
    
    ElMessage.warning('标题或内容为空~')
    return
  } 
  await shareStory({title:title.value,content:content.value})
  title.value = ''
  content.value = ''
}

</script>

<style scoped>
.title{
  margin-bottom:40px;
}
.btn{
  margin-top:100px;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>